<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .outer{
            background-color: #ff0000;
        }
        input{
            height: 50px;
            width: 150px;
            font-size: 16px;
            font-family: 华文行楷;
            color: #00ff00;
        }

    </style>
</head>
<div id="container" class="outer xxx yyy">
    <form>
        <div class="xxx">
            <input type="text" placeholder="请输入姓名" id="username" name="username">
        </div>
        <div >
            <input type="password" placeholder="请输入密码" id="password" name="password">
        </div>
    </form>
</div>
<script type="text/javascript">
    //  通过指定的id 获取 单个元素
    let container = document.getElementById("container");
    console.log(container);

    // 通过标签名称获取 多个元素 , 返回一个 HTMLCollection 对象，有点类似于数组
    let divs = document.getElementsByTagName("div") ;
    console.log( divs ) ;

    // 根据 name 的值，获取元素
    document.getElementsByName("password") ;

    // 获取到 那些  class 属性中包含 指定值 的元素
    let xxx = document.getElementsByClassName("xxx") ;
    console.log( xxx ) ;

    console.log( "------------------------------") ;


    //querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
    xxx = document.querySelector(".xxx") ;
    console.log( xxx ) ;
    // 返回的是一个 NodeList
    xxx = document.querySelectorAll(".xxx") ;
    console.log( xxx ) ;

    /*
        querySelector 和 querySelectorAll 中，所有的 CSS 选择器 都可以使用
        class 选择器、 id 选择器、标签选择器、后代选择器（ #container # password ）
    * */
</script>
<body>

</body>
</html>